<template>
	<div>
		<div class="header">
        <span class="go-back"><a href="home.html"></a></span>
        <em>{{$route.query.name}}</em>
    </div>
    <div class="container detail-container">
    	<div class="banner">
    		<div class="filter-box"></div>
    		<div class="thumbnail">
    			<img :src="'http://film.glkjjt.com/'+$route.query.img"/>
    		</div>
    		<div class="movie-intr">
    			<h1>{{$route.query.name}}</h1>
    			<div class="star-level">
    				<div id="star_con" class="star-vote">
						<span id="add_star" class="add-star"></span>
						<span id="del_star" class="del-star" ></span>
					</div>
    				<div class="point">
    					{{$route.query.rate}}
    				</div>
    			</div>
    			<p>{{$route.query.type}}</p>
    			<p>主演，{{$route.query.actors}}</p>
    			<p>上映时间：{{$route.query.ReleaseTime}}大陆</p>
    		</div>
    	</div>
    	<div class="movie-recommend">
    		<p>{{$route.query.intro}}</p>
    	</div>
   	</div>
   <div class="order-bar">
   		<!--<a href="cinema.html">立即订购</a>-->
   		<router-link :to="{path:'/cinema',query:{id:$route.query.id,name:$route.query.name,rate:$route.query.rate}}">立即订购</router-link>
   </div>
	</div>
</template>

<script>
	export default{
		mounted(){
			this.showStar(this.$route.query.rate)
		},
		methods:{
			showStar(n){
		        var con_wid=document.getElementById("star_con").offsetWidth;
		        var del_star=document.getElementById("del_star");
		        console.log(con_wid);
		    //透明星星移动的像素
		        var del_move=(n*con_wid)/10;
		        del_star.style.backgroundPosition=-del_move+"px 0px";
		        del_star.style.left=del_move+"px";
		    }
		}
	}
</script>

<style>
</style>